<template>
    <PanelBox :image="image">
        <div class="tailing-grade-box">
            <div class="tailing-grade-content" v-for="(item, index) in levelList" :key="index">
                <span>{{ item.name }}</span>
                <div class="content-bottom">{{ item.value || 0 }}</div>
            </div>
        </div>
    </PanelBox>
</template>

<script>
import PanelBox from "@/component/PanelBox";
import { FetchGetTailingPondLevel } from "@/api";

export default {
    name: "TailingGrade",

    components: {
        PanelBox,
    },

    props: {
        image: {
            type: String,
            default() {
                return "";
            },
        },
    },

    data() {
        return {
            levelList: [
                // { name: "一等", value: 10 },
                // { name: "二等", value: 12 },
                // { name: "三等", value: 21 },
                // { name: "四/五等", value: 14 },
            ],
        };
    },

    created() {
        this.refreshList();
    },

    methods: {
        refreshList() {
            FetchGetTailingPondLevel().then((res) => {
                this.levelList = [
                    { name: "一等", value: res.oneLevel },
                    { name: "二等", value: res.twoLevel },
                    { name: "三等", value: res.threeLevel },
                    { name: "四/五等", value: res.fourLevel },
                ];
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.tailing-grade-box {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: -5px;
    .tailing-grade-content {
        width: 50%;
        height: 42%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .content-bottom {
            height: 38px;
            min-width: 30px;
            background: rgba(0, 27, 63, 0.5);
            border: 1px solid rgba(0, 180, 255, 0.5);
            font-size: 29px;
            font-family: HYk2gj;
            font-weight: bolder;
            color: #faff00;
            line-height: 36px;
            text-align: center;
            padding: 0 3px;
        }
    }
}
</style>
